<template>
  <div>
    <h1 class="text-center mt-[100px] mx-auto text-lg">这是login页</h1>
    <div class="w-[500px] m-auto flex justify-around">
      <nuxt-link to="/my">跳转到my页面</nuxt-link>
      <input
        type="text"
        name="username"
        v-model="username"
        placeholder="用户名"
      />
      <input
        type="password"
        name="password"
        v-model="password"
        placeholder="密码"
      />
      <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapMutations } from 'vuex'
export default Vue.extend({
  name: 'Login',
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    ...mapMutations(['SET_TOKEN']),
    // async login() {
    //   const userInfo = {
    //     user: 'userName',
    //     password: 'password',
    //   }
    //   const info = (
    //     await this.$auth.loginWith('local', {
    //       data: userInfo,
    //     })
    //   ).data
    //   //  {code: 200, message: 'success', data: {…}}
    //   if (info.code === 200) {
    //     this.$router.replace('/my')
    //   }
    // },
    async login() {
      const info = await this.$apis.admin.login({
        username: this.username,
        password: this.password,
      })
      if (info.code === 200) {
        // 将token保存到vuex中
        this.SET_TOKEN(info.data)
        this.$router.replace('/admin/index')
      } else {
        this.$message.error(info.message)
      }
    },
  },
})
</script>
